
<!-- 
	date:2023-11-01
	author:xiaoya
	desc:该页面在电梯档案迭代中 暂不显示（后续电梯档案迭代会用到）
 -->
<template>
  <view class="imgSee">

    <swiper :indicator-dots="false" :autoplay="false" @change="swiperChange" class="swiper" :style="{height:heights+'px'}">
        <block v-for="(item,i) in imgarr" :key="i">
          <swiper-item>
            <view class="swipers">
                <image mode="aspectFill" :style="{height:heights+'px'}" :src="item"></image>
                <view class="up_num">{{currentIndex+'/'+imgarr.length}}</view>
            </view>
          </swiper-item>
          
        </block>
        
      </swiper>
    <view class="imgUP">
            <view class="up_text">上滑展示详情记录</view>
            
    </view>
    <view class="imgText">
        <view class="times">2023/01/02</view>
        <view class="imgText_conten">
            <view class="conten_row">
                <text>半月保养:</text>
                <text>层门和轿门</text>
            </view>
            <view class="conten_row">
                <text>保养记录:</text>
                <text>异常</text>
            </view>
        </view>
    </view>
      
      <view style="height: 50rpx;"></view>

  </view>
</template>

<script>

export default {
	components:{
       
	},
	data() {
		return {
			imgarr:[
				'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/f73390d25b557f686bc9cefc706db3ff.png',
				'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231027/8e14fcf7f8c2f963d32e0a3f5c4d4edf.jpg',
			],
			heights:null,
			currentIndex:0,
			isShows:false,
			isElevatorId:'1614082203923881986'
		};
	},
	mounted() {
		uni.getSystemInfo({
			success: (res) => {
				console.log('system', res);
				this.heights = res.windowHeight - 70;
			},
		});
	},

	methods:{
		swiperChange(e) {
			console.log('swiperChange',e);
			this.currentIndex = e.detail.current + 1;
			this.isShows = true;
		}
	}
};
</script>

<style>
    page{
        background: #d8d8d8;
    }
</style>
<style lang="scss" scoped>

    .swiper{
        // margin-bottom: 20rpx;
        position: relative;
    }
    .imgSee{
        // width: 100%;
        // height: calc(100vh - 100rpx);
        .swipers{
            width: 100%;
            height: 100%;
            z-index: 9;
            position: relative;
            image{
                width: 100%;
                height: 100%;
                
            }
            .up_num{
                font-size: 12px;
                font-weight: 400;
                color: #fff;
                // width: 60px;
                position: absolute;
                bottom: 88rpx;
                right: 30rpx;
            }
        }
        .imgUP{
            position: sticky;
            bottom: 220rpx;
            left: 0;
            right: 0;
            font-size: 12px;
            font-weight: 400;
            color: #fff;
            display: flex;
            width: 710rpx;
            margin: 0 auto;
            justify-content: center;
            // text-align: center;
            // .up_text{
            //     flex: 1;
            // }

        }
        .imgText{
           
            position: sticky;
            bottom: 10rpx;
            left: 0;
            right: 0;
            background: #fff;
            width: 710rpx;
            margin: 0 auto;
            border-radius: 4px;
            box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.07); 
            margin-bottom: 20rx;
            // padding: 10rpx;
            // margin-bottom: 50rpx;
            z-index: 99;
            .times{
                height: 70rpx;
                padding: 0 20rpx;
                line-height: 70rpx;
                border-bottom:2rpx #eee solid ;
                font-size: 12px;
                font-weight: 400;
                color: #999999;
            }
            .imgText_conten{
                padding: 20rpx;
                font-size: 13px;
                font-weight: 400;
                color: #666;
                .conten_row{
                    display: flex;
                    margin-bottom: 16rpx;
                    text:nth-of-type(1){
                        width:120rpx;
                        display: inline-block;
                    }
                    text:nth-of-type(2){ 
                        width:500rpx;
                        display: inline-block;
                    }
                }
            }
        }
       
    }

</style>